<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="dashboard/header :: header"></div>

<body id="page-top">

	<div id="wrapper">

		<div id="content-wrapper">

			<div class="col-sm-12">
				<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
					<li class="nav-item"><a class="nav-link active"
						id="pills-home-tab" data-toggle="pill" href="#pills-home"
						role="tab" aria-controls="pills-home" aria-selected="true">参数管理</a>
					</li>
					<li class="nav-item"><a class="nav-link"
						id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
						role="tab" aria-controls="pills-profile" aria-selected="false">机房管理</a>
					</li>
				</ul>
			</div>
			
			<div class="col-sm-12">
				<div class="tab-content" id="pills-tabContent">
					<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

						<div class="container-fluid" style="padding: 0px;">
							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="#">参数管理</a></li>
							</ol>
							<form class="form-inline" id="trainingSearchForm">
								<div class="input-group mb-2 mr-sm-2">
									<select name="condition[masterCode]" style="width: 200px"
										id="inputState" class="form-control">
										<option th:each="m:${schools}" th:text="${m.masterName}"
											th:value="${m.masterCode}"></option>
									</select>
								</div>
								<button type="button" onclick="search(this)"
									class="btn btn-primary mb-2">搜索</button>
							</form>

							<div class="span12">
								<div class="table-responsive">
									<table class="table table-bordered" id="dataTable" width="100%"
										cellspacing="0">
										<thead>
											<tr>
												<th style="max-width: 150px;">所属机房</th>
												<th style="max-width: 220px">参数描述</th>
												<th style="max-width: 220px;">参数名称</th>
												<th>参数值</th>
												<th style="max-width: 100px">操作</th>
											</tr>
										</thead>
										<tbody>
										</tbody>
										<footer>
											<tr>
												<th>所属机房</th>
												<th>参数描述</th>
												<th>参数名称</th>
												<th>参数值</th>
												<th>操作</th>
											</tr>
										</footer>
									</table>
								</div>
							</div>
						</div>

					</div>
					<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
						<div class="container-fluid" style="padding: 0px;">
							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="#">机房管理</a></li>
							</ol>
							<form class="form-inline">
								<button th:if="${session.current_manager.rolePower}=='9'"
									type="button" onclick="addmaster()"
									class="btn btn-primary mb-2">添加</button>
							</form>
							<div class="span12">
								<div class="table-responsive">
									<table class="table table-bordered" id="masterDataTable"
										width="100%" cellspacing="0">
										<thead>
											<tr>
												<th>机房代码</th>
												<th>机房</th>
												<th>排序</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
										</tbody>
										<footer>
											<tr>
												<th>机房代码</th>
												<th>机房</th>
												<th>排序</th>
												<th>操作</th>
											</tr>
										</footer>
									</table>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>

		</div>
	</div>
	<script
		src="http://training-static.linesno.com/vendor/jquery/jquery.min.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="http://training-static.linesno.com/layer/layer.js"></script>

	<script
		src="http://training-static.linesno.com/vendor/jquery-easing/jquery.easing.min.js"></script>

	<script
		src="http://training-static.linesno.com/vendor/datatables/jquery.dataTables.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/datatables/dataTables.bootstrap4.js"></script>

	<script type="text/javascript">
			$(document).ready(function() {
			
			
				
			  $('#dataTable').DataTable({
				  serverSide: true ,
				  ordering: false , 
				  searching : false ,
	              bLengthChange : false ,
	              rowNum : 15 , 
	              multiselect : true,
	              ajax : {
	                  "url": "/manager/params_list_data",
	                  "dataType": "json" , 
	                  "data": function (d) {
	                      var searchParams = paramsBuilder() ;
	                      if(searchParams){
	                        $.extend(d,searchParams); 
	                      }
	                  }
	              } ,
	              columns: [
	            	  	  { data: 'masterCode_label' },
	            	  	  { data: 'paramDesc' },
	                  { data: 'paramName' },
	                  { data: 'paramValue' },
	                  { data: 'id'}
	              ] ,
	              columnDefs: [{
	                  "render": function(data, type, row) {
	   		           		var html = data ; 
	                	  		if(data.length > 20){
								html = data.substring(0,20)+"..." ;
	                	  		}
	   		           		return html;
	                  },
	                  "targets": 3
	            	  },
	            	  {
	                  "render": function(data, type, row) {
	                	  		var id = '"' + row.id + '"';
	   		           		var html = "<a data-id='"+data+"' style='cursor:pointer' onclick='add(this)'><i class='fa fa-edit'></i> 修改</a>" ; 
	   		           		return html;
	                  },
	                  "targets": 4
	              }],
	              language : {
	                  "sProcessing": "处理中...",
	                  "sLengthMenu": "显示 _MENU_ 项结果",
	                  "sZeroRecords": "没有匹配结果",
	                  "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
	                  "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
	                  "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
	                  "sInfoPostFix": "",
	                  "sSearch": "搜索:",
	                  "sUrl": "",
	                  "sEmptyTable": "表中数据为空",
	                  "sLoadingRecords": "载入中...",
	                  "sInfoThousands": ",",
	                  "oPaginate": {
	                      "sFirst": "首页",
	                      "sPrevious": "上页",
	                      "sNext": "下页",
	                      "sLast": "末页"
	                  },
	                  "oAria": {
	                      "sSortAscending": ": 以升序排列此列",
	                      "sSortDescending": ": 以降序排列此列"
	                  }
	             }
			  });
			  
			
		
				$('#masterDataTable').DataTable({
					  serverSide: true ,
					  ordering: false , 
					  searching : false ,
		              bLengthChange : false ,
		              rowNum : 15 , 
		              multiselect : true,
		              ajax : {
		                  "url": "/manager/master_list_data",
		                  "dataType": "json"
		              } ,
		              columns: [
		            	  	  { data: 'masterCode' },
		                  { data: 'masterName' },
		                  { data: 'masterOrder' },
		                  { data: 'id'}
		              ] ,
		              columnDefs: [{
		                  "render": function(data, type, row) {
		                	  		var id = '"' + row.id + '"';
		   		           		var html = "<a data-id='"+data+"' style='cursor:pointer' onclick='modifymaster(this)'><i class='fa fa-edit'></i> 修改</a>" ; 
		   		           		return html;
		                  },
		                  "targets": 3
		              }],
		              language : {
		                  "sProcessing": "处理中...",
		                  "sLengthMenu": "显示 _MENU_ 项结果",
		                  "sZeroRecords": "没有匹配结果",
		                  "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
		                  "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
		                  "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
		                  "sInfoPostFix": "",
		                  "sSearch": "搜索:",
		                  "sUrl": "",
		                  "sEmptyTable": "表中数据为空",
		                  "sLoadingRecords": "载入中...",
		                  "sInfoThousands": ",",
		                  "oPaginate": {
		                      "sFirst": "首页",
		                      "sPrevious": "上页",
		                      "sNext": "下页",
		                      "sLast": "末页"
		                  },
		                  "oAria": {
		                      "sSortAscending": ": 以升序排列此列",
		                      "sSortDescending": ": 以降序排列此列"
		                  }
		             }
				  }); 
			  
			});
			
			function add(btn){
				var id = $(btn).attr("data-id") ;
				console.log("id = "+id) ; 
				layer.open({
					  type: 2,
					  title: false,
					  shade: 0.8, 
					  title: '修改',
					  area: ['50%', '50%'],
					  content: ['/manager/params_modify/'+id, 'no'], //iframe的url，no代表不显示滚动条
					  end: function(){ //此处用于演示
					     console.log("close") ; 
					     $("#dataTable").dataTable().fnDraw(false);
					  }
					});
			}
			
			function addmaster(){
				layer.open({
					  type: 2,
					  title: false,
					  shade: 0.8, 
					  title: '修改',
					  area: ['50%', '50%'],
					  content: ['/manager/master_add', 'no'], //iframe的url，no代表不显示滚动条
					  end: function(){ //此处用于演示
					     console.log("close") ; 
					     $("#masterDataTable").dataTable().fnDraw(false);
					  }
					});
			}
			
			function modifymaster(btn){
				var id = $(btn).attr("data-id") ;
				console.log("id = "+id) ; 
				layer.open({
					  type: 2,
					  title: false,
					  shade: 0.8, 
					  title: '修改',
					  area: ['50%', '50%'],
					  content: ['/manager/master_modify/'+id, 'no'], //iframe的url，no代表不显示滚动条
					  end: function(){ //此处用于演示
					     console.log("close") ; 
					     $("#masterDataTable").dataTable().fnDraw(false);
					  }
					});
			}
			
			
			//搜索
			function search(btn){
				// $('#dataTable').draw();
				$("#dataTable").dataTable().fnDraw(false);
			}
			
			
			/**
			 * get params
			 */
			function paramsBuilder() {
			    var param = {} ;
			    $('#trainingSortPanel input').each(function() {
			        if ($(this).val() != '' && this.name != '') {
			            param[this.name] = this.value;
			        }

			    });
			    var i = $('#trainingSearchForm input') ; 
			    console.log("i = " + i) ; 
			    $('#trainingSearchForm input').each(function() {
			        if ($(this).val() != '' && this.name != '') {
			            param[this.name] = this.value;
			        }

			    });
			    $('#trainingSearchForm select').each(function() {
			        console.log('value = ' + this.value + ' , value = ' + $(this).val());
			        if ($(this).val() != null &&  $(this).val() != '' && this.name != '') {
			            param[this.name] = $(this).val() ;
			        }
			    });
			    return param ;
			}
			
		</script>

</body>

</html>
